<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
        <title>{{user.nickname}}</title>
        <link rel="stylesheet" type="text/css" href="{{request.application_url}}/styles/default.css" />
        <script src="{{request.application_url}}/js/MochiKit/MochiKit.js"></script>
        <script src="{{request.application_url}}/js/tiny_mce/tiny_mce.js"></script>
        <script type="text/javascript">
        <!--
        var url = '{{request.url}}';
        tinyMCE.init({theme:'advanced', mode:'textareas'});
        var onsocial = {};
        onsocial.init = function() {
            connect($('profile-save-button'), 'onclick', onsocial.save);
        };
        onsocial.save = function() {
            var content = tinymce.EditorManager.get('user-profile').getContent();
            var sendContent = serializeJSON({profile:content});
            doXHR(url, {method:'PUT', sendContent:sendContent})
        };
        {{if user.nickname == environ.get('REMOTE_USER')}}
        connect(window, 'onload', onsocial.init);
        {{endif}}
        //-->
        </script>
    </head>
    <body>
        <h1>{{user.nickname}}</h1>
        <div>
            <h2>identities</h2>
            <ul>
                {{for openid in user.openids}}
                <a href="{{openid.passurl}}">{{openid.passurl}}</a>
                {{endfor}}
            </ul>
        </div>
        <div>
            <h2>Profile</h2>
            {{if user.nickname == environ.get('REMOTE_USER')}}
            <textarea id="user-profile">{{user.profile}}</textarea>
            <button type="button" id="profile-save-button">Save</button>
            {{elif user.profile}}
            <div>
                {{user.profile | html}}
            </div>
            {{else}}
            <p>
                {{user.nickname}} does'nt write profile yet.
            </p>
            {{endif}}
        </div>
    </body>
</html>
